Hello and welcome.
In this lecture we are going to create styling for an app using csx.
To begin I have already added some basic styling here.
Line one here.
I've got the body select took sorta style you need select all then the property and the value.
So the body is the Select is what.
Um stylin and the proper TS have applied to the bodies of font family.
So I've set a font for sans serif Wain's using fonts.
It's always best to specify more than one font in case one is not available.
E can default to the other but most computers should have Ariel a list.
So that's what that is.
Line 3 attached attacked property core padding Palin refers to the space inside the element.
Giving a pad in of 30 pixels which will be applied round the four corners so there are four corners.
Top right bottom left and then I've got the background give me in the background a hex value column
and then I've got a class in line 7 notes a class chord wrapper which we created when we're doing an
ah hastier male side of things.
So the propertys give him the wrapper class selector give me set maximum width of 690 pixels so the
actual container where the balloons will be will be 690 pixels.
So to marjane to zero and then 0 2 0 or to a mains It will centre some parts of it.
Okay and then one other class cord blue and set the carlaw to a hex value.
Here online 12 on line 14 introduced a hate one selector which is the head in tag and I have given in
the various properties I have set the mark.
Given a property margin and sedita or took marjean refers to the space outside the element.
So that means it will centre or the Four Corners on the page margin from the top mains.
I want it to move down 50 pixels from the top margin from the bottom.
Online 17 meters from the bottom.
I wanted to move up 50 pixels collage refers to the colour of the text.
Then on line 20 a text transformation property text transform.
What that will do.
This is the same same.
Same properties fully hate one is tall make it upper case text transform is change it to upper case
have said the font size to 30 pixels.
Then the carlaw.
I've given it a hex value column.
Line 24.
I have introduced a.
Heidi.
Okay I've got an idea here called Call balloon gallery.
So this idea would have defined in our hasty mail document.
So these are live propertys applied to the to the BALLAnd gallery.
So this would be the gallery the actual deed that contains the balloons.
So I've set the background to that hex value given the height of 121 pixels.
Feel free to play around with these values set there with two hundred nineteen pixels text a line to
sent me some what is text to be centred carlaw giving the colour property of hecks value font size refers
to the size of a text font family.
Sounds scary.
Again I'll add another call aereo.
So that there's a substitute font but it does refer to the space body radio.
Here refers to the rounded corner.
That's what gives it the rounded corner.
Margin from the top 20 pixels display in line block display means I want the balance to be in line in
the block.
I want it to float to the left and offset the margin for the various pixel values I have added some
styling for the individual.
But loon's saw started from Lime 39 all the way to lying 74 so I'll just run through.
Have you used.
Online 39 vet.
Have you used the M child select top.
This is.
Here's Cody n dash child Selecter.
Okay so what that does.
It matches every element that is the end child regardless of type or its parent.
So n can represent in number.
A key word or a formula.
In this case 3 n means it's referring to the third balloon in the DIV.
Okay so we see this stylin here so this in green here is the selector that I d.
And you notice all the balloons were created as Dave's heads.
We've got the deal here.
So Dave we're talking about the end child of the div okay because there are several days.
So we meet them.
We need to use the enth child select tool to match the relevant D to were seen here in parenthesis 3
n the n were represent the D.
So is seeing the third div apply this styling to the third day.
Give me that background and give the text that column online 44.
Similar thing the same process the div anyone here was saying here 3 n minus 1 which will be 2 so that
means is referring to the second balloon in the gallery.
What that means if we go to line 14 line that's referring to 5 N which will be 15 balloon k.
Ly in 54.
We're talking bout 13.
The child is 13 here so we're talking about the 13 div.
The balloon that is in the 13 DB.
Apply this stylin this one fifty eight 10 n which means apply this time in to the tent Deve inside that
balloon.
That's what this is and line third line sixty two.
We are plein this thailin here to the 8 db which is the 8 balloon.
Give you this property 6 67 again.
Then they append challenge.
Here is for N which is the fort and balloon and half to the fort.
Balloon.
Online sixty eight.
We've caught it.
Clear.
When you are floating elements to the left or right there's bound to be some obstruction so you use
the clep property if you float into the right.
You can look both ways or you can close to the right.
So this is the clear property on line 60 it is used to remove obstructions like 70.
There's a tag idea.
The attribute their chord you know this is what we all use.
So when all the balloons have been popped this is this time it will apply to the text that will be displayed
on the screen so the display here says none.
And this has a colour and font size 100 pixels right so none display in a balloon.
Once the balloon are gone and it would display colour on your display it text same there is no more
balloons left or right.
So let's see for our stylin just run looked through the code again.
So we started off with a body.
Selektah Then we had some classes here.
One we get how was I did have an H to.
I removed it so let's get rid of the H too snobbish to anymore.
We did the gallery and we did the balloon gallery as we the enth child so that's it.
I just saved that.
Then we can view our.
See what the app looks like at the moment.
All right.
Let's have a look at what happened looks like at the moment.
I just hope on the index.
Excellent so it's looking good at the moment.
But no functionality yet so we can't pop them as we pull the miles over them.
So we're going to implement that use in javascript.
That's it for this lecture.
Thanks for watching.